<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布新帖 - 绝区零社区</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/create-post.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">
                <img src="images/logo.png" alt="绝区零社区">
                <span>绝区零社区</span>
            </div>
            <div class="nav-links">
                <a href="home.html">首页</a>
                <a href="#">攻略中心</a>
                <a href="#">角色图鉴</a>
                <a href="forum.html">社区论坛</a>
                <a href="#">赛事资讯</a>
            </div>
            <div class="nav-right">
                <div class="user-profile">
                    <div class="user-avatar">
                        <img src="images/avatar1.png" alt="用户头像">
                        <div class="user-dropdown">
                            <div class="dropdown-header">
                                <img src="images/avatar1.png" alt="用户头像">
                                <div class="user-info">
                                    <h4>用户名</h4>
                                    <p>UID: 12345678</p>
                                </div>
                            </div>
                            <ul class="dropdown-menu">
                                <li><a href="dashboard.html"><i class="fas fa-user"></i> 个人主页</a></li>
                                <li><a href="javascript:void(0)" class="bind-game-account"><i class="fas fa-gamepad"></i> 绑定游戏账号</a></li>
                                <li><a href="#"><i class="fas fa-cog"></i> 账号设置</a></li>
                                <li><a href="#" class="logout-btn"><i class="fas fa-sign-out-alt"></i> 退出登录</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="create-post-container">
        <div class="create-post-wrapper">
            <!-- 页面头部 -->
            <div class="page-header">
                <h1><i class="fas fa-edit"></i> 发布新帖</h1>
                <p>分享你的游戏心得、攻略或讨论话题</p>
            </div>

            <!-- 发帖表单 -->
            <form id="createPostForm" class="create-post-form">
                <!-- 帖子类型和分类选择 -->
                <div class="form-row">
                    <div class="form-group">
                        <label for="postType">帖子类型 <span class="required">*</span></label>
                        <select id="postType" name="post_type" required>
                            <option value="">请选择帖子类型</option>
                            <option value="攻略">攻略</option>
                            <option value="讨论">讨论</option>
                            <option value="视频">视频</option>
                            <option value="资讯">资讯</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="category">分类 <span class="required">*</span></label>
                        <select id="category" name="category" required>
                            <option value="">请选择分类</option>
                            <option value="角色">角色</option>
                            <option value="装备">装备</option>
                            <option value="副本">副本</option>
                            <option value="剧情">剧情</option>
                        </select>
                    </div>
                </div>

                <!-- 标题输入 -->
                <div class="form-group">
                    <label for="title">标题 <span class="required">*</span></label>
                    <input type="text" id="title" name="title" placeholder="请输入帖子标题（最多100字）" maxlength="100" required>
                    <div class="char-count">
                        <span id="titleCount">0</span>/100
                    </div>
                </div>

                <!-- 内容输入 -->
                <div class="form-group">
                    <label for="content">内容 <span class="required">*</span></label>
                    <textarea id="content" name="content" placeholder="请输入帖子内容..." rows="12" required></textarea>
                    <div class="char-count">
                        <span id="contentCount">0</span> 字符
                    </div>
                </div>

                <!-- 图片上传 -->
                <div class="form-group">
                    <label>图片上传</label>
                    <div class="image-upload-area" id="imageUploadArea">
                        <div class="upload-placeholder">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>点击或拖拽图片到此处上传</p>
                            <span>支持 JPG、PNG 格式，最多 5 张</span>
                        </div>
                        <input type="file" id="imageInput" multiple accept="image/*" style="display: none;">
                    </div>
                    <div class="image-preview" id="imagePreview"></div>
                </div>

                <!-- 视频链接 -->
                <div class="form-group">
                    <label for="videoUrl">视频链接</label>
                    <input type="url" id="videoUrl" name="video_url" placeholder="请输入视频链接（可选）">
                    <small>支持 B站、YouTube 等平台的视频链接</small>
                </div>

                <!-- 标签输入 -->
                <div class="form-group">
                    <label for="tags">标签</label>
                    <input type="text" id="tags" name="tags" placeholder="请输入标签，用逗号分隔（可选）">
                    <small>例如：星火, 攻略, 新手</small>
                </div>

                <!-- 表单操作 -->
                <div class="form-actions">
                    <button type="button" class="btn-secondary" onclick="history.back()">
                        <i class="fas fa-arrow-left"></i> 返回
                    </button>
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-paper-plane"></i> 发布帖子
                    </button>
                </div>
            </form>
        </div>
    </main>

    <!-- 加载提示 -->
    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="loading-content">
            <div class="spinner"></div>
            <p>正在发布帖子...</p>
        </div>
    </div>

    <script src="js/create-post.js"></script>
</body>
</html> 